<template>
	<a-tabs default-active-key="styles" size="small">
		<a-tab-pane key="styles" :tab="i18n('componentStyle.style','风格')">
			<a-form-item :label="iconfontI18n('iconfont','图标')">
				<rx-icon-select  style="width: 100%" v-model="config.dataSources.icon" :iconUrl="iconUrl" ></rx-icon-select>
			</a-form-item>
			<a-form-item :label="iconfontI18n('iconSize','图标大小')">
				<a-input-number style="width: 100%" v-model:value="config.dataSources.fontSize" :min="12"/>
			</a-form-item>
			<a-form-item :label="iconfontI18n('iconColor','图标颜色')">
				<a-input v-model:value="config.dataSources.color" type="color"  :placeholder="iconfontI18n('customColor','自定义颜色')"/>
			</a-form-item>
		</a-tab-pane>
	</a-tabs>
</template>

<script>
/*
图标素材
 */
import {RxIconSelect} from "@lowcode/jpaas-base-lib";
import ComponentDef from "@/views/modules/design/right-component/common/component-def.js";
export default {
	name: "IconfontDef",
	mixins:[ComponentDef],
	components:{
		RxIconSelect
	},
	data(){
		return{
            iconUrl:""
		}
	},
	created() {
        let baseUrl = import.meta.env.JPAAS_BASE_URL
        this.iconUrl = {
            lineUrl:baseUrl + '/iconfont-svg/line/iconfont.js',
            fillUrl:baseUrl + '/iconfont-svg/fill/iconfont.js',
            colorUrl:baseUrl + '/iconfont-svg/color/iconfont.js'
        }
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		iconfontI18n(name,text,key){
			return this.$ti18(name,text,"iconfontLang",key);
		}
	}
}
</script>

<style scoped>

</style>
